<template>
	<view class="all-main">
		<view class="main">
			<view class="tops">
				<view class="search">
					<u-search placeholder="请输入行业名称" shape="square" bgColor="#ffffff" :showAction="false"
						:disabled="true" @click="searchClick"></u-search>
				</view>
				<view class="list-row">
					<view class="item-row">
						<text>大类</text>
					</view>
					<view class="item-row">
						<text>小类</text>
					</view>
					<view class="item-row">
						<text>MCC</text>
					</view>
				</view>
			</view>
			<view class="lists">
				<view class="items bg_gray">
					<view class="items-row" :class="one_id == item.mccCode ? 'active' : ''"
						v-for="(item, index) in categoryList" :key="index" @click="oneClick(item)">
						<text>{{item.mccName}}</text>
					</view>
				</view>
				<view class="items">
					<view class="items-row" :class="two_id == item.mccCode ? 'active' : ''"
						v-for="(item, index) in twoList" :key="index" @click="twoClick(item)">
						<text>{{item.mccName}}</text>
					</view>
				</view>
				<view class="items">
					<view class="items-row" :class="three_id == item.mccCode ? 'active' : ''"
						v-for="(item, index) in threeList" :key="index" @click="threeClick(item)">
						<text>{{item.mccCode}}{{item.mccName}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: '',
				categoryList: [],
				twoList: [],
				threeList: [],
				one_id: '',
				two_id: '',
				three_id: '',
			}
		},
		onLoad(e) {
			this.type = e.type
			this.getMerchantCategory()
		},
		methods: {
			// 获取经营类目
			async getMerchantCategory() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/getMerchantCategory',
					data: {
						type: this.type
					}
				});
				uni.hideLoading()
				if (res.code == 200) {
					this.categoryList = res.data
					this.one_id = res.data[0].mccCode
					this.twoList = []
					this.twoList = res.data[0].details
					this.two_id = res.data[0].details[0].mccCode
					this.threeList = []
					this.threeList.push(res.data[0].details[0])
				}
			},
			// 选择大类
			oneClick(item) {
				this.one_id = item.mccCode
				this.twoList = []
				this.twoList = item.details
				this.two_id = item.details[0].mccCode
				this.threeList = []
				this.threeList.push(item.details[0])
			},
			// 选择小类
			twoClick(item) {
				this.two_id = item.mccCode
				this.threeList = []
				this.threeList.push(item)
			},
			// 选择MCC
			threeClick(item) {
				uni.$emit('mer_mcc', item.mccCode)
				uni.$emit('mer_name', item.mccName)
				uni.navigateBack({
					delta: 1
				})
			},
			// 搜索
			searchClick() {
				uni.navigateTo({
					url: '/pages/index/guotong/search?type=' + this.type
				})
			}
		}
	}
</script>

<style lang="scss">
	.all-main {
		.main {
			height: 94vh;
			padding: 0 20rpx;

			.tops {
				padding-top: 20rpx;
				background-color: #F2F6FC;
				height: 10vh;

				.search {
					// margin-top: 20rpx;
				}

				.list-row {
					display: flex;
					background-color: #ffffff;
					padding: 20rpx 20rpx;
					margin-top: 20rpx;
					border-top-left-radius: 10rpx;
					border-top-right-radius: 10rpx;
					border-bottom: 1px solid #f4f4f5;

					.item-row {
						width: 33.3%;
					}
				}
			}

			.lists {
				display: flex;

				.items {
					background-color: #ffffff;
					width: 33.3%;
					font-size: 24rpx;
					height: 83vh;
					overflow-y: auto;

					.items-row {
						display: flex;
						align-items: center;
						padding: 12rpx;
						height: 68rpx;
					}
				}

				.active {
					background-color: #ffffff;
					color: #f2873a;
				}

				.bg_gray {
					background-color: #F2F6FC;
					color: #909399;
				}
			}
		}
	}
</style>